<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <span>今日销售额</span>
          </div>
          <div class="card-body">
            <div class="card-value">¥{{ todaySales }}</div>
            <div class="card-footer">
              <span>较昨日</span>
              <span :class="salesTrend >= 0 ? 'up' : 'down'">
                {{ Math.abs(salesTrend) }}%
                <i :class="salesTrend >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <span>库存预警</span>
          </div>
          <div class="card-body">
            <div class="card-value">{{ lowStockCount }}</div>
            <div class="card-footer">
              <span>个商品库存不足</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <span>本月订单数</span>
          </div>
          <div class="card-body">
            <div class="card-value">{{ monthlyOrders }}</div>
            <div class="card-footer">
              <span>较上月</span>
              <span :class="orderTrend >= 0 ? 'up' : 'down'">
                {{ Math.abs(orderTrend) }}%
                <i :class="orderTrend >= 0 ? 'el-icon-top' : 'el-icon-bottom'"></i>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover" class="dashboard-card">
          <div class="card-header">
            <span>商品总数</span>
          </div>
          <div class="card-body">
            <div class="card-value">{{ totalProducts }}</div>
            <div class="card-footer">
              <span>个商品</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>销售趋势</span>
          </div>
          <div class="chart-container">
            <div ref="salesChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <div slot="header">
            <span>商品分类占比</span>
          </div>
          <div class="chart-container">
            <div ref="categoryChart" style="width: 100%; height: 300px"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="table-row">
      <el-col :span="24">
        <el-card shadow="hover">
          <div slot="header">
            <span>最近订单</span>
          </div>
          <el-table :data="recentOrders" style="width: 100%" v-loading="loading">
            <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column>
            <el-table-column prop="customer" label="客户" width="120"></el-table-column>
            <el-table-column prop="amount" label="金额" width="120">
              <template slot-scope="scope">
                ¥{{ scope.row.amount }}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status === '已完成' ? 'success' : 'warning'">
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DashboardPage',
  data() {
    return {
      loading: false,
      todaySales: 0,
      salesTrend: 0,
      lowStockCount: 0,
      monthlyOrders: 0,
      orderTrend: 0,
      totalProducts: 0,
      recentOrders: [],
      salesChart: null,
      categoryChart: null
    }
  },
  mounted() {
    this.initData()
    this.initCharts()
  },
  methods: {
    async initData() {
      this.loading = true
      try {
        // 模拟数据，实际项目中应该从API获取
        this.todaySales = 12345.67
        this.salesTrend = 12.5
        this.lowStockCount = 5
        this.monthlyOrders = 256
        this.orderTrend = -5.2
        this.totalProducts = 1234
        this.recentOrders = [
          {
            orderNo: 'ORD20240301001',
            customer: '张三',
            amount: 1234.56,
            status: '已完成',
            createTime: '2024-03-01 10:00:00'
          },
          {
            orderNo: 'ORD20240301002',
            customer: '李四',
            amount: 2345.67,
            status: '处理中',
            createTime: '2024-03-01 11:00:00'
          }
        ]
      } finally {
        this.loading = false
      }
    },
    initCharts() {
      this.$nextTick(() => {
        this.initSalesChart()
        this.initCategoryChart()
      })
    },
    initSalesChart() {
      this.salesChart = echarts.init(this.$refs.salesChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true
        }]
      }
      this.salesChart.setOption(option)
    },
    initCategoryChart() {
      this.categoryChart = echarts.init(this.$refs.categoryChart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '食品' },
              { value: 735, name: '饮料' },
              { value: 580, name: '日用品' },
              { value: 484, name: '电子产品' },
              { value: 300, name: '其他' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.categoryChart.setOption(option)
    }
  },
  beforeDestroy() {
    if (this.salesChart) {
      this.salesChart.dispose()
    }
    if (this.categoryChart) {
      this.categoryChart.dispose()
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;

  .dashboard-card {
    .card-header {
      font-size: 14px;
      color: #909399;
    }
    .card-body {
      padding: 10px 0;
      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #303133;
        margin: 10px 0;
      }
      .card-footer {
        font-size: 12px;
        color: #909399;
        .up {
          color: #67C23A;
          margin-left: 5px;
        }
        .down {
          color: #F56C6C;
          margin-left: 5px;
        }
      }
    }
  }

  .chart-row {
    margin-top: 20px;
  }

  .table-row {
    margin-top: 20px;
  }
}
</style> 